<template>
  <div class="container" ref="mainCon">
    <div class="mainCon">
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <template v-if="!loginQy">
          <el-form :inline="true" :model="filterField" ref="searchConditions">
            <el-col :lg="8" :xl="6">
              <el-form-item
                label="区域"
                class="row-padding-bottom"
                v-show="!loginQy"
              >
                <el-cascader
                  ref="manageArea"
                  v-model="areaId"
                  :options="areasOptions"
                  @change="getAreaId"
                  clearable
                  filterable
                  :props="{ checkStrictly: true }"
                  :append-to-body="false"
                ></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item
                label="行业"
                class="row-padding-bottom"
                v-show="!loginQy"
              >
                <el-select
                  v-model="filterField.industryId"
                  filterable
                  placeholder="请选择"
                  clearable
                  :popper-append-to-body="false"
                >
                  <el-option
                    v-for="item in industryOptions"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <template v-if="advanced">
              <el-col :lg="8" :xl="6">
                <el-form-item label="项目名称" class="row-padding-bottom">
                  <el-input
                    v-model="filterField.projectName"
                    placeholder="请输入项目名称"
                    clearable
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-form-item label="项目状态" class="row-padding-bottom">
                  <el-select
                    v-model="filterField.projectStatus"
                    filterable
                    placeholder="请选择"
                    clearable
                  >
                    <el-option
                      v-for="item in statusOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-form-item label="专户账号" class="row-padding-bottom">
                  <el-input
                    v-model="filterField.account"
                    placeholder="请输入专户账号"
                    clearable
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-form-item label="开户银行" class="row-padding-bottom">
                  <el-select
                    v-model="filterField.bankId"
                    filterable
                    placeholder="请选择开户银行"
                    clearable
                    :popper-append-to-body="false"
                    @change="bankSelectChange"
                    @clear="bankSiteClear"
                  >
                    <el-option
                      v-for="item in bankOptions"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-form-item label="网点" class="row-padding-bottom">
                  <el-select
                    placeholder="请选择银行网点"
                    clearable
                    v-model="filterField.bankSiteId"
                  >
                    <el-option
                      v-for="item in bankSiteOptions"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-form-item label="是否签约" class="row-padding-bottom">
                  <el-select
                    v-model="filterField.signed"
                    clearable
                    placeholder="请选择"
                  >
                    <el-option label="已签约" value="1"></el-option>
                    <el-option label="未签约" value="0"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-form-item label="是否代发" class="row-padding-bottom">
                  <el-select
                    v-model="filterField.isUndertakes"
                    clearable
                    placeholder="请选择"
                  >
                    <el-option label="是" value="1"></el-option>
                    <el-option label="否" value="0"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </template>

            <el-form-item label="">
              <a
                @click="toggleAdvanced"
                style="margin-left: 40px; color: #409eff; cursor: pointer"
                class="btnColor"
              >
                {{ advanced ? '收起' : '展开' }}
                <i
                  :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                ></i>
              </a>
              <el-button
                type="primary"
                icon="icon iconfont iconchazhao1"
                @click="searchList"
                class="searchBtn"
              >
                <span>搜索</span>
              </el-button>
              <exportBtn
                v-if="!(loginQy || isCzUser())"
                :dataLen="tableList.length"
                :filterField="filterField"
                :api="api"
              ></exportBtn>
              <!-- <el-button
                class="commonBut saveBtn funComBut"
                @click="toAdd"
                v-hasBtn="'accountList:add'"
                v-show="loginQy || isCzUser()"
              >
                <span class="opetareText">添加专户</span>
              </el-button> -->
            </el-form-item>
          </el-form>
        </template>
        <template v-if="loginQy">
          <el-form :inline="true" :model="filterField" ref="searchConditions">
            <el-col :lg="8" :xl="6">
              <el-form-item label="项目名称" class="row-padding-bottom">
                <el-input
                  v-model="filterField.projectName"
                  placeholder="请输入项目名称"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="项目状态" class="row-padding-bottom">
                <el-select
                  v-model="filterField.projectStatus"
                  filterable
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in statusOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <template v-if="advanced">
              <el-col :lg="8" :xl="6">
                <el-form-item label="专户账号" class="row-padding-bottom">
                  <el-input
                    v-model="filterField.account"
                    placeholder="请输入专户账号"
                    clearable
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-form-item label="开户银行" class="row-padding-bottom">
                  <el-select
                    v-model="filterField.bankId"
                    filterable
                    placeholder="请选择开户银行"
                    clearable
                    @change="bankSelectChange"
                    @clear="bankSiteClear"
                  >
                    <el-option
                      v-for="item in bankOptions"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-form-item label="网点" class="row-padding-bottom">
                  <el-select
                    placeholder="请选择银行网点"
                    clearable
                    v-model="filterField.bankSiteId"
                  >
                    <el-option
                      v-for="item in bankSiteOptions"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </template>
            <el-form-item>
              <a
                @click="toggleAdvanced"
                style="margin-left: 40px; color: #409eff; cursor: pointer"
                class="btnColor"
              >
                {{ advanced ? '收起' : '展开' }}
                <i
                  :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                ></i>
              </a>
              <el-button
                type="primary"
                icon="icon iconfont iconchazhao1"
                @click="searchList"
                class="searchBtn"
              >
                <span>搜索</span>
              </el-button>
              <exportBtn
                v-if="!(loginQy || isCzUser())"
                :dataLen="tableList.length"
                :filterField="filterField"
                :api="api"
              ></exportBtn>
              <!-- <el-button
                        class="commonBut saveBtn funComBut"
                        icon="icon iconfont icontianjia"
                        @click="toAdd"
                        v-hasBtn="'accountList:add'"
                        v-show="loginQy || isCzUser()"
                    >
                        <span class="opetareText">添加专户</span>
                    </el-button> -->
            </el-form-item>
          </el-form>
        </template>
      </el-row>
      <div class="spacing"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <div style="margin-bottom: 24px" v-if="loginQy || isCzUser()">
          <exportBtn
            :dataLen="tableList.length"
            :filterField="filterField"
            :api="api"
          ></exportBtn>
          <el-button
            class="commonBut saveBtn funComBut"
            icon="icon iconfont icontianjia"
            @click="toAdd"
          >
            <span class="opetareText">添加专户</span>
          </el-button>
        </div>
        <el-table
          :data="tableList"
          ref="tableBox1"
          :max-height="tableHeight"
          v-loading="loading"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          @sort-change="sortChange"
          style="border: 1px solid #dfe6ec"
          border
          @header-dragend="handleDragend"
        >
          <el-table-column prop="projectName" label="项目名称" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.projectName"
                :columnName="'projectName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="projectStatusDesc"
            align="center"
            label="项目状态"
            :formatter="formatTd"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="bankName"
            label="开户银行"
            align="center"
            :formatter="formatTd"
            min-width="160"
          ></el-table-column>
          <el-table-column
            prop="bankSiteName"
            label="网点"
            align="left"
            :formatter="formatId"
            width="230"
          >
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.bankSiteName"
                :columnName="'bankSiteName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            label="专户账号"
            align="center"
            :formatter="formatTd"
            width="150"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.account">{{
                scope.row.account.replace(
                  /^([\s\S]{3})[\s\S]*?([\s\S]{3})$/,
                  '$1**** ****$2'
                )
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="signedName"
            label="签约状态"
            align="center"
            :formatter="formatTd"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="isCancellation"
            label="是否销户"
            align="center"
            :formatter="formatTd"
            width="120"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.isCancellation == 1">是</span>
              <span v-else>否</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="balance"
            label="余额(万元)"
            align="center"
            sortable="custom"
            :formatter="dateForma"
            min-width="160"
          ></el-table-column>
          <el-table-column
            prop="payTotal"
            label="缴存(万元)"
            align="center"
            :formatter="dateForma"
            min-width="160"
          ></el-table-column>
          <el-table-column
            prop="expensesTotal"
            label="支出(万元)"
            align="center"
            :formatter="dateForma"
            min-width="160"
          ></el-table-column>
          <el-table-column
            label="操作"
            align="left"
            :formatter="formatTd"
            min-width="270"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-link
                type="primary"
                @click="revokeAccountCancellation(scope.row)"
                v-show="
                  userTypeCode == 'AREAMANAGE' && scope.row.isCancellation == 1
                "
                >撤销销户</el-link
              >
              <el-link
                type="primary"
                v-hasBtn="[
                  'accountList:detail',
                  'accountListSGF:detail',
                  'accountListJSF:detail',
                ]"
                @click="toDetail(scope.$index, scope.row)"
                >查看流水</el-link
              >
              <span>
                <el-link
                  type="primary"
                  v-if="isShowUpdate && !scope.row.isHefeng"
                  @click="toEdit(scope.$index, scope.row)"
                  >修改</el-link
                >
                <el-link
                  type="primary"
                  v-if="isShowUpdate && isEsUser()"
                  @click="checkBankPush(scope.row)"
                  >签约状态变更</el-link
                >
              </span>
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关专户数据"></emptyTable>
          </div>
        </el-table>
        <!-- filterField为搜索条件 -->
        <!-- getTableList为获取子组件的数据 -->
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
          @getpageNo="getpageNo"
          @getpageSize="getpageSize"
        ></Pagination>
      </div>
    </div>
    <!--专户流水-->
    <el-dialog
      title="专户流水"
      :visible.sync="dialogVisible"
      width="80%"
      :before-close="handleClose"
      :modal-append-to-body="false"
    >
      <p class="warningInfo" v-if="tipsInfo">
        <i class="el-icon-warning warningIcon"></i>
        <span class="warningText">{{ tipsInfo }}</span>
      </p>
      <el-row style="padding: 24px 30px">
        <el-row style="margin-top: 0px; margin-bottom: 10px">
          <el-col :span="8" style="line-height: 40px">
            专户账号：{{
              isDisplay
                ? this.specialAccount.replace(
                    /^([\s\S]{3})[\s\S]*?([\s\S]{3})$/,
                    '$1**** ****$2'
                  )
                : this.specialAccount
            }}
            <el-button
              type="primary"
              style="
                padding: 2px;
                width: 40px;
                background: #009588;
                border: 1px solid #009588;
              "
              @click="doDisplay"
              >{{ isDisplay ? '显示' : '隐藏' }}</el-button
            >
          </el-col>
          <!-- <el-col :span="2" style="line-height: 40px;"></el-col> -->
          <el-col :span="14" style="text-align: right">
            <el-form
              :inline="true"
              :model="lsfilterField"
              ref="searchConditions"
            >
              <el-form-item
                label="时间"
                class="row-padding-bottom"
                style="margin-bottom: 0px"
              >
                <el-date-picker
                  v-model="lsfilterField.createDate"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>
              <el-form-item style="margin-bottom: 0px">
                <el-button
                  type="primary"
                  icon="icon iconfont iconchazhao1"
                  class="commonBtn"
                  @click="searchLsList"
                  size="small"
                ></el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <el-row>
          <el-table
            :data="tableLsList"
            v-loading="lsLoading"
            :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
            highlight-current-row
            stripe
            style="border: 1px solid #dfe6ec"
          >
            <el-table-column
              prop="createTime"
              label="时间"
              width="200"
            ></el-table-column>
            <el-table-column
              prop="total"
              label="金额"
              align="center"
              :formatter="formatTd"
            ></el-table-column>
            <el-table-column
              prop="typeDesc"
              label="类型"
              align="center"
              :formatter="formatTd"
            ></el-table-column>
            <el-table-column
              prop="remark"
              label="备注"
              align="center"
              :formatter="formatTd"
            ></el-table-column>
            <!-- 表格数据为空时，页面显示 -->
            <div slot="empty" v-show="isLsShow">
              <emptyTable emptyText="暂无相关专户数据"></emptyTable>
            </div>
          </el-table>
          <!-- filterField为搜索条件 -->
          <!-- getTableList为获取子组件的数据 -->
          <Pagination
            ref="paginationLs"
            @getList="getTableLsList"
            :filterField="lsfilterField"
            :requestUrl="requestLsUrl"
          ></Pagination>
        </el-row>
      </el-row>
    </el-dialog>
    <el-dialog
      :title="eventType === 'add' ? '添加专户' : '修改工资专户信息'"
      :visible.sync="accountFormVisible"
      :close-on-click-modal="false"
      @close="cancelAccountDialog('accountForm')"
      width="640px"
      custom-class="brand-dialog-min-width accountDialog"
      :modal-append-to-body="false"
    >
      <el-form
        :model="accountForm"
        :rules="formRules"
        ref="accountForm"
        label-width="120px"
        class="mrT8"
      >
        <el-form-item
          label="项目名称："
          prop="projectId"
          v-if="this.$store.state.userType == 'MONITOR'"
        >
          <el-select
            ref="projectSearch"
            class="dialogSingleInp"
            v-model="accountForm.projectId"
            clearable
            filterable
            placeholder="请输入项目名称进行搜索"
            @change="ChangeSearch"
            @visible-change="visibleChangeProject"
            :filter-method="selectChange"
            :disabled="eventType !== 'add'"
            v-if="eventType === 'add'"
          >
            <el-option
              v-for="(item, index) in projectOptions"
              :key="index"
              :label="item.projectName"
              :value="index"
            ></el-option>
            <div class="block">
              <el-pagination
                layout="prev, pager, next"
                :total="total"
                :current-page.sync="pageNo"
                :page-size="pageSizeNumber"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              >
              </el-pagination>
            </div>
          </el-select>
          <el-select
            v-model="accountForm.projectId"
            placeholder="请选择"
            class="dialogSingleInp"
            clearable
            filterable
            :disabled="eventType !== 'add'"
            v-else
          >
            <el-option
              v-for="(item, index) of projectOptions"
              :key="index"
              :label="item.projectName"
              :value="item.projectId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目名称：" prop="projectId" v-else>
          <el-select
            v-model="accountForm.projectId"
            placeholder="请选择"
            class="dialogSingleInp"
            clearable
            filterable
            :disabled="eventType !== 'add'"
            @change="changeProject"
          >
            <el-option
              v-for="(item, index) of projectListOptions"
              :key="index"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="开户银行：" prop="bankId">
          <el-select
            v-model="accountForm.bankId"
            placeholder="请选择"
            class="dialogSingleInp"
            clearable
            filterable
            :disabled="accountForm.projectTotal > 0 || isDisabled"
            @change="changeBankId"
          >
            <el-option
              v-for="(item, index) of bankOptions"
              :key="index"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="银行网点：" prop="bankSiteId">
          <el-select
            v-model="accountForm.bankSiteId"
            class="dialogSingleInp"
            :placeholder="
              accountForm.bankId != '' ? '请选择' : '请先选择开户银行'
            "
            clearable
            filterable
            :disabled="isDisabled"
          >
            <el-option
              v-for="(item, index) of bankBranchOptions"
              :key="index"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="专户账号：" prop="account">
          <el-input
            maxlength="64"
            v-model="accountForm.account"
            autocomplete="off"
            placeholder="请输入"
            class="dialogSingleInp"
            @blur="accountForm.account = changeValue($event)"
            :disabled="isDisabled"
          ></el-input>
        </el-form-item>
        <el-form-item label="专户开户凭证：">
          <uploadAnnex
            @getFileList="getFileList"
            :limitationFactor="limitationFactor"
            @getFile="getFile"
            :upLoadFile="accountForm.upLoadFileAcc"
          />
        </el-form-item>
        <el-row>
          <el-col :span="24">
            <!-- <elementImage :upLoadFile="accountForm.upLoadFileAcc"   :srcList="accountForm.srcList" :oldSrcList="accountForm.oldSrcList" @changeSrcList="changeSrcList"></elementImage> -->
            <uploadResult
              style="margin-left: 116px !important"
              :resultList="accountForm.upLoadFileAcc"
              @callBackResult="getFile"
            />
          </el-col>
        </el-row>
        <el-form-item label="农民工工资委托发放三方协议：" class="agreementBox">
          <uploadAnnex
            @getFileList="getFileListAgr"
            :limitationFactor="limitationFactorAgr"
            @getFile="getFileAgr"
            :upLoadFile="accountForm.upLoadAgreementFile"
          />
          <!-- <el-link v-if="isWhUser()" class="download" type="primary" @click="downloadTemplate">下载协议模板</el-link> -->
          <el-link
            type="primary"
            @click="showPic('seeExampleBox')"
            v-show="checkImg(seeAgreement) && seeAgreement"
            class="download"
            >下载协议模板</el-link
          >
          <el-image
            class="previewImg"
            style="width: 56px; height: 0px"
            :src="seeAgreement"
            :preview-src-list="[seeAgreement]"
            id="seeExampleBox"
            v-show="checkImg(seeAgreement)"
          ></el-image>
          <el-link
            type="primary"
            class="download"
            v-show="!checkImg(seeAgreement) && seeAgreement"
            @click="lookResult(seeAgreement)"
            >下载协议模板</el-link
          >
        </el-form-item>
        <el-row>
          <el-col :span="24">
            <!-- <elementImage :upLoadFile="accountForm.upLoadAgreementFile"   :srcList="accountForm.agrSrcList" :oldSrcList="accountForm.oldAgrSrcList" @changeSrcList="changeSrcListAgreement"></elementImage> -->
            <uploadResult
              style="margin-left: 116px !important"
              :resultList="accountForm.upLoadAgreementFile"
              @callBackResult="getFileAgr"
            />
          </el-col>
        </el-row>
        <el-form-item
          label="人工费补充协议："
          class="agreementBox"
          v-if="
            isEsUser() &&
            (userTypeCode == 'PROJECT_ADMINISTRATOR' ||
              userTypeCode == 'LABOR_ADMINISTRATOR' ||
              userTypeCode == 'COMPANY')
          "
        >
          <uploadAnnex
            @getFileList="getFileListArtificial"
            :limitationFactor="limitationFactorArtificial"
            @getFile="getFileArtificial"
            :upLoadFile="accountForm.upLoadArtificialFile"
          />
          <el-link
            type="primary"
            @click="showPic('seeArtificialBox')"
            v-show="checkImg(seeArtificial) && seeArtificial"
            class="download"
            >下载模板</el-link
          >
          <el-image
            class="previewImg"
            style="width: 56px; height: 0px"
            :src="seeArtificial"
            :preview-src-list="[seeArtificial]"
            id="seeArtificialBox"
            v-show="checkImg(seeArtificial)"
          ></el-image>
          <el-link
            type="primary"
            class="download"
            v-show="!checkImg(seeArtificial) && seeArtificial"
            @click="lookResult(seeArtificial)"
            >下载模板</el-link
          >
        </el-form-item>
        <el-row
          v-if="
            isEsUser() &&
            (userTypeCode == 'PROJECT_ADMINISTRATOR' ||
              userTypeCode == 'LABOR_ADMINISTRATOR' ||
              userTypeCode == 'COMPANY')
          "
        >
          <el-col :span="24">
            <uploadResult
              style="margin-left: 116px !important"
              :resultList="accountForm.upLoadArtificialFile"
              @callBackResult="getFileArtificial"
            />
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          @click.native="cancelAccountDialog('accountForm')"
          class="cancel"
          >取消</el-button
        >
        <el-button
          type="primary"
          @click.native="saveBankInfo('accountForm')"
          class="save"
          :loading="canLogin"
          >保存</el-button
        >
      </div>
    </el-dialog>
    <!-- 修改签约状态 -->
    <el-dialog
      title="修改签约状态"
      :visible.sync="showSign"
      :close-on-click-modal="false"
      @close="cancelSign"
      width="900px"
      custom-class="brand-dialog-min-width accountDialog"
      :modal-append-to-body="false"
    >
      <div class="signBox">
        <div v-if="!editSign">
          <div class="statusTitle red">银行未向系统推送该专户</div>
          <p class="editTip" v-if="signInfo.signed">
            当前专户签约状态<span>【已签约】</span>，是否修改为<span>【未签约】</span>？
          </p>
          <p class="editTip" v-else>
            当前专户签约状态<span>【未签约】</span>，是否修改为<span>【已签约】</span>？
          </p>
          <el-button
            class="commonBut saveBtn funComBut saveMr"
            type="primary"
            @click="submitSign"
            >确定修改</el-button
          >
        </div>

        <div class="successBox" v-else>
          <img :src="require('@/assets/success.png')" alt="" />
          <p>操作成功</p>
        </div>
        <p class="tableTips">历史修改记录</p>
        <el-table
          :data="signTable"
          v-loading="signLoading"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column prop="account" label="专户账号" width="200" />
          <el-table-column
            prop="beforeValue"
            label="修改前"
            align="center"
            :formatter="formatTd"
          />
          <el-table-column
            prop="afterValue"
            label="修改后"
            align="center"
            :formatter="formatTd"
          />
          <el-table-column
            prop="creatorName"
            label="修改人"
            align="center"
            :formatter="formatTd"
          >
            <template slot-scope="scope">
              <span
                >{{ scope.row.creatorName }}({{
                  scope.row.creatorAccount
                }})</span
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="修改时间"
            width="180"
            align="center"
            :formatter="formatTd"
          />
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isSignShow">
            <emptyTable emptyText="暂无相关专户数据"></emptyTable>
          </div>
        </el-table>
        <!-- filterField为搜索条件 -->
        <!-- getTableList为获取子组件的数据 -->
        <Pagination
          ref="paginationSign"
          @getList="getTableSign"
          :filterField="signfilterField"
          :requestUrl="requestSignUrl"
        ></Pagination>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
  name: 'specialAccountListList',
  data() {
    return {
      hiddleToolBar: false,
      tableHeight: null,
      titleText: '专户列表',
      advanced: false,
      upLoadType: 'upLoadAgreementFile',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
      },
      //表格数据
      tableList: [],
      tableLsList: [],
      requestUrl: 'api-acc/account/expand/accountpage',
      requestLsUrl: 'api-acc/accass/expand/list',
      date: [],
      //搜索条件
      filterField: {
        sysAppCode: localStorage.getItem('judgeRoleCode'),
        projectName: '', //项目名称
        account: '', //专户账号
        areaId: '', //区域
        industryId: '', //行业
        bankId: '',
        projectStatus: '',
        signed: '',
        isUndertakes: '',
        bankSiteId: '',
      },
      pageSize: 20,
      pageNum: 1,
      lsfilterField: {
        createDate: '',
        projectId: '',
        account: '',
      },
      isShow: false, //列表加载
      isLsShow: false, //列表加载
      loading: true,
      lsLoading: true,
      dialogVisible: false,
      specialAccount: '', //专户账号
      projectId: '',
      isDisplay: true, //是否隐藏
      userType: '', //用户类型
      areaId: '', //区域
      bankOptions: [],
      bankBranchOptions: [], //网点列表
      loginQy: '', //当前登录用户是否是企业
      accountFormVisible: false,
      // 补充专户信息
      accountForm: {
        projectId: '',
        accountId: '',
        bankId: '',
        bankSiteId: '', //银行网点id
        account: '',
        srcList: [],
        oldSrcList: [],
        upLoadAgreementFile: [], //三方协议
        agrSrcList: [],
        oldAgrSrcList: [],
        upLoadFileAcc: [],
        upLoadArtificialFile: [],
        artSrcList: [],
        oldArtSrcList: [],
      },
      // bankData: [],
      eventType: '',
      formRules: {
        projectId: [
          {
            required: true,
            message: '项目名称不能为空',
            trigger: 'change',
          },
        ],
        bankId: [
          {
            required: true,
            message: '银行不能为空',
            trigger: 'change',
          },
        ],
        bankSiteId: [
          {
            required: true,
            message: '银行网点不能为空',
            trigger: 'change',
          },
        ],
        account: [
          {
            required: true,
            // pattern: /^([1-9]{1})(\d{11,18})((-)(\d{1,9}))*$/,
            // pattern: /^[^\u4e00-\u9fa5]{0,}$/,
            pattern: /^[^\u4e00-\u9fa5]{0,}$/,
            message: '请输入正确格式的账号',
            trigger: 'blur',
          },
        ],
      },
      canLogin: false, //专户保存按钮loading
      projectListOptions: [],
      tipsInfo: '', //提示语
      limitationFactor: {
        uploadAnnexUrl: 'api-f/files/upload', //自定义上传文件接口地址
        upLoadFileLength: 10, //自定义上传文件最大数量设置
        fileSize: 5, //自定义上传文件最大设置
        formatType: 'typeFour', //自定义上传格式校验类型
        messagetip:
          '要求格式为png，jpg，jpeg，doc，docx，xls，xlsx，pdf格式，附件大小不超过5M', //自定义报错提示语
        fileId: 'salaryExcel', //自定义id解决一个页面包含多个上传附件
        uploadFormId: 'salaryExcelForm', //自定义id解决一个页面包含多个上传附件
        methodTip:
          '请上传专户开户凭证，附件格式支持png，jpg，jpeg，doc，docx，xls，xlsx，pdf，最多上传10个附件', //自定义上传文件提示
        uploadBtnType: 'typeOne', //自定义上传按钮类型
        messageFileSizetip: '最多能上传5M以内的附件',
      },
      limitationFactorAgr: {
        uploadAnnexUrl: 'api-f/files/upload', //自定义上传文件接口地址
        upLoadFileLength: 10, //自定义上传文件最大数量设置
        fileSize: 5, //自定义上传文件最大设置
        formatType: 'typeFour', //自定义上传格式校验类型
        messagetip:
          '要求格式为png，jpg，jpeg，doc，docx，xls，xlsx，pdf格式，附件大小不超过5M”', //自定义报错提示语
        fileId: 'salaryExcelAgr', //自定义id解决一个页面包含多个上传附件
        uploadFormId: 'ExcelAgreement', //自定义id解决一个页面包含多个上传附件
        methodTip:
          '请上传农民工工资委托发放三方协议，附件格式支持png，jpg，jpeg，docx，doc，xls，xlsx，pdf，最多上传10个附件', //自定义上传文件提示
        uploadBtnType: 'typeOne', //自定义上传按钮类型
        messageFileSizetip: '最多能上传5M以内的附件',
      },
      limitationFactorArtificial: {
        uploadAnnexUrl: 'api-f/files/upload', //自定义上传文件接口地址
        upLoadFileLength: 10, //自定义上传文件最大数量设置
        fileSize: 5, //自定义上传文件最大设置
        formatType: 'typeFour', //自定义上传格式校验类型
        messagetip:
          '要求格式为png，jpg，jpeg，doc，docx，xls，xlsx，pdf格式，附件大小不超过5M”', //自定义报错提示语
        fileId: 'salaryExcelArt', //自定义id解决一个页面包含多个上传附件
        uploadFormId: 'ExcelArt', //自定义id解决一个页面包含多个上传附件
        methodTip:
          '请上传人工费补充协议，附件格式支持png，jpg，jpeg，docx，doc，xls，xlsx，pdf，最多上传10个附件', //自定义上传文件提示
        uploadBtnType: 'typeOne', //自定义上传按钮类型
        messageFileSizetip: '最多能上传5M以内的附件',
      },
      isShowUpdate: '',
      projectOptions: [], //项目名称下拉框 滁州监察
      total: 0,
      pageSizeNumber: 20,
      pageNo: 1,
      projectSelect: '',
      item: '',
      firstProjectId: '',
      isIe: true,
      seeAgreement: '',
      userTypeCode: '',
      seeArtificial: '',
      bankSiteOptions: [],
      api: '',
      isDisabled: false,
      // 修改签约状态
      showSign: false,
      signLoading: false,
      isSignShow: false,
      editSign: false,
      signInfo: { signed: 0 },
      signTable: [],
      signfilterField: { account: '' },
      requestSignUrl: 'api-acc/signLog/expand/page',
    }
  },
  computed: {
    ...mapState(['areasOptions', 'industryOptions', 'statusOptions']),
  },

  created() {
    this.$store.state.activeMenu = '/home/specialAccount/specialAccountList'
    this.getBank()
    this.userType = localStorage.getItem('loginType')
    this.userTypeCode = this.$store.state.userType
    //建筑端企业端项目详情-专户管理跳转专户列表
    this.filterField.projectName = this.$route.query.projectName
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
    // 企业用户不显示区域和行业

    if (
      localStorage.getItem('loginType') === 'QY' ||
      localStorage.getItem('loginType') === 'XM'
    ) {
      this.loginQy = true
    } else {
      //获取区域
      this.getAreas({ areaId: this.$store.state.areaInfoArr.areaId })
      //获取行业
      this.getIndustry({})
    }
    // this.getProjectList(this.pageNo, this.pageSizeNumber);
    this.getApi()
    this.isShowUpdate =
      this.$store.state.buttonLimitsArr.indexOf('accountList:update') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('accountListSGF:update') > -1
  },
  activated() {
    window.addEventListener('scroll', this.handleScroll, true)
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData(this.pageNum, this.pageSize)
      this.$refs.tableBox1.doLayout()
    })
  },
  deactivated() {
    let that = this
    window.removeEventListener('scroll', that.handleScroll, true)
  },
  beforeDestroy() {
    let that = this
    window.removeEventListener('scroll', that.handleScroll, true)
  },
  methods: {
    //
    checkBankPush(item) {
      this.axios
        .post('api-acc/account/expand/checkSign', { account: item.account })
        .then((res) => {
          console.log(res)
          if (res.data.hasError) {
            this.$alert(res.data.errorMsg, '提示', {
              confirmButtonText: '确定',
              type: 'warning',
              callback: (action) => {},
            })
          } else {
            this.showSign = true
            this.signfilterField.account = item.account
            this.signInfo = item
            this.editSign = false
            this.signTable = []
            this.$nextTick(() => {
              this.$refs.paginationSign.getTableListData()
            })
          }
        })
    },
    //取消修改
    cancelSign() {
      this.showSign = false
      this.signfilterField.account = ''
      this.signLoading = false
      this.isSignShow = false
      // this.signInfo.signed = 0
      this.editSign = false
      this.signTable = []
    },
    //保存修改
    submitSign() {
      this.axios
        .post('api-acc/account/expand/sign', {
          id: this.signInfo.id,
          signStatus: this.signInfo.signed ? 0 : 1,
        })
        .then((res) => {
          if (!res.data.hasError) {
            this.editSign = true
            this.$nextTick(function () {
              this.$refs.pagination.getTableListData()
              this.$refs.paginationSign.getTableListData()
            })
          } else {
            this.$message({
              message: res.data.errorMsg,
              type: 'error',
            })
          }
        })
    },
    getTableSign(data) {
      this.signTable = data
      this.signLoading = false
      if (this.signTable.length < 1) {
        this.isSignShow = true
      }
    },
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    handleScroll(e) {
      this.$nextTick(function () {
        if (
          this.$refs.tableBox &&
          this.$refs.tableBox.getBoundingClientRect().top < 128
        ) {
          // this.tableHeight = this.$refs.mainCon.getBoundingClientRect().height - 84
          this.tableHeight = window.innerHeight - 276

          if (document.getElementsByClassName('tableBoxCur').length) {
            document.getElementsByClassName('tableBoxCur')[0].style.height =
              null
          }
          this.hiddleToolBar = true
        } else {
          this.hiddleToolBar = false
        }
      })
    },
    getpageSize(val) {
      this.pageSize = val
    },
    getpageNo(val) {
      this.pageNum = val
    },
    ...mapActions(['getAreas', 'getIndustry']),
    changeSrcList(val) {
      this.accountForm.srcList = val
    },
    changeSrcListAgreement(val) {
      this.accountForm.agrSrcList = val
    },
    /**
     * @name: 监听银行的Id
     * @param {type}
     * @Author: 471826078@qq.com
     */
    changeBankId(val) {
      this.accountForm.bankSiteId = ''
      if (!val) {
        this.bankBranchOptions = []
      } else {
        this.getBankBranchList(val)
      }
    },
    /**
     * @name: 获取银行网点列表
     * @param {String}  bankId
     * @Author: 471826078@qq.com
     */
    getBankBranchList(bankId) {
      this.axios
        .post('api-acc/accountbank/expand/banksite', { bankId })
        .then((res) => {
          this.bankBranchOptions = res.data.result
          if (res.data.result.length === 0) {
            this.$message({
              message: '请联系银行管理员进行网点信息维护',
              type: 'warning',
            })
          }
        })
        .catch((error) => {
          this.$message({
            message: '获取网点数据失败',
            type: 'error',
          })
        })
    },
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    getTableLsList(data) {
      this.tableLsList = data
      this.lsLoading = false
      if (this.tableLsList.length < 1) {
        this.isLsShow = true
      }
    },
    // 搜索
    searchList() {
      this.$refs.pagination.getTableListData()
    },
    searchLsList() {
      this.$refs.paginationLs.getTableListData()
    },
    handleClose(done) {
      this.dialogVisible = false
    },
    toDetail(index, row) {
      //   if (this.userType == "QY" || this.userType == "XM") {
      //     this.$router.push({
      //       path: "/home/specialAccount/companyAccountDetail",
      //       name: "companyAccountDetail",
      //       query: {
      //         projectId: row.projectId,
      //         path: "specialAccountList",
      //         projectName:row.projectName,
      //         heFengProject:row.isHefeng,
      //       },
      //     });
      //     this.$store.commit("CHANGE_SLIDER_NAME", {
      //       oldUrl: "/home/specialAccount/specialAccountList",
      //       newUrl: this.$router.currentRoute.fullPath,
      //     });
      //   } else {
      //     this.specialAccount = row.account;
      //     this.projectId = row.projectId;
      //     this.lsfilterField.projectId = row.projectId;
      //     this.lsfilterField.account = row.account;
      //     this.lsfilterField.createDate = row.createTime;
      //     this.isDisplay = true;
      //     this.dialogVisible = true;
      //     if (this.isYcUser() && row.balance * 1 < 0) {
      //       this.tipsInfo =
      //         "流水数据不完整，请联系施工企业登录系统及时分配流水。";
      //     } else {
      //       this.tipsInfo = "";
      //     }
      //     this.$nextTick(function () {
      //       this.$refs.paginationLs.getTableListData();
      //     });
      //   }
      this.$router.push({
        path: '/home/specialAccount/companyAccountDetail',
        name: 'companyAccountDetail',
        query: {
          projectId: row.projectId,
          path: 'specialAccountList',
          projectName: row.projectName,
          heFengProject: row.isHefeng,
          account: row.account,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/specialAccount/specialAccountList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    doDisplay() {
      this.isDisplay = !this.isDisplay
    },
    dateForma(row, column) {
      const daterc = row[column.property]
      if (daterc || daterc == '0') {
        let lately2 = (daterc / 10000).toFixed(3) //对小数点后3位四舍五入
        return lately2.substring(0, lately2.lastIndexOf('.') + 3)
      } else {
        return '--'
      }
    },
    //获取选中的区域最后一级id
    getAreaId() {
      var areaId = this.areaId[this.areaId.length - 1]
      this.filterField.areaId = areaId
    },
    getBank() {
      var data = {
        type: 'BANK_TYPE',
      }
      this.axios({
        method: 'post',
        url: 'api-bs/base/dicitem/findbytype',
        data: data,
      })
        .then((response) => {
          this.bankOptions = response.data.result
        })
        .catch((error) => {
          this.$message.error('数据获取失败')
        })
    },
    getProjectList(pageNo, pageSizeNumber, val, projectId) {
      var urlAdress, Data
      if (this.$store.state.userType == 'MONITOR') {
        urlAdress = 'api-p/projectstats/expand/list'
        if (this.eventType == 'update') {
          Data = {
            pageNo: 1,
            pageSize: 20,
            projectId: projectId,
            projectName: val,
            isSa: '',
          }
        } else {
          Data = {
            pageNo: pageNo,
            pageSize: pageSizeNumber,
            projectName: val,
            isSa: 0,
          }
        }
      } else {
        urlAdress = 'api-p/projectcompany/expand/current/projects'
        Data = {}
      }
      this.axios({
        method: 'post',
        url: urlAdress,
        data: Data,
      })
        .then((response) => {
          if (this.$store.state.userType == 'MONITOR') {
            this.projectOptions = response.data.result.results
            this.total = response.data.result.total
            this.firstProjectId = this.projectOptions[0].projectId
          } else {
            this.projectListOptions = response.data.result
            this.firstProjectId = response.data.result[0].code
          }
          this.getSeeExample()
          this.getSeeArtificial()
        })
        .catch((error) => {
          this.$message.error('数据获取失败')
        })
    },
    // 添加专户
    toAdd() {
      this.eventType = 'add'
      this.getProjectList(this.pageNo, this.pageSizeNumber)
      this.accountFormVisible = true
    },
    //专户弹框取消
    cancelAccountDialog() {
      this.accountFormVisible = false
      this.accountForm.srcList = []
      this.accountForm.oldSrcList = []
      this.accountForm.upLoadFileAcc = []
      this.accountForm.upLoadAgreementFile = []
      this.accountForm.agrSrcList = []
      this.accountForm.oldAgrSrcList = []
      this.accountForm.artSrcList = []
      this.accountForm.oldArtSrcList = []
      this.accountForm.upLoadArtificialFile = []
      this.accountForm.projectId = ''
      this.$refs.accountForm.resetFields()
      // this.$nextTick(function(){
      //   this.accountFormVisible = false;
      //   this.$refs.accountForm.resetFields();
      // });
    },
    //修改专户
    toEdit(index, row) {
      this.eventType = 'update'
      this.accountFormVisible = true
      if (this.$store.state.userType == 'MONITOR') {
        this.getProjectList(
          this.pageNo,
          this.pageSizeNumber,
          row.projectName,
          row.projectId
        )
      } else {
        this.getProjectList(this.pageNo, this.pageSizeNumber)
      }
      // 当项目录入的专户已经匹配上了银行推送的专户信息（如果银行有推送过来专户余额或者是专户流水）禁止项目端/企业端修改【开户银行】【银行网点】【专户账号】字段
      if (this.userTypeCode !== 'MONITOR') {
        this.hasBankInfo(row.account)
      }
      this.$nextTick(function () {
        this.getUpdateAccountInfo(row.projectId)
      })
    },
    //保存专户信息
    saveBankInfo() {
      //确定按钮禁止点击
      this.canLogin = true
      var projectId
      if (this.$store.state.userType == 'MONITOR') {
        projectId = this.projectId
      } else {
        projectId = this.accountForm.projectId
      }
      // 小项目管理 项目端：工资代发使用附件备案功能，无需添加工资专户、工资保证金
      this.axios
        .post('api-p/project/expand/findMiniProConfig', { projectId })
        .then((res) => {
          if (!res.data.hasError && res.data.result.isSalary === 0) {
            this.$message({
              message: '根据监察功能配置，该项目无需添加工资专户',
              type: 'warning',
            })
            this.canLogin = false
            return false
          }
        })
      this.$refs['accountForm'].validate((valid) => {
        var url = ''
        if (valid) {
          if (this.eventType === 'add') {
            url = 'api-acc/account/expand/add'
          } else {
            url = 'api-acc/account/expand/update'
          }
          let data = {
            projectId: projectId,
            id: this.accountForm.accountId,
            account: this.accountForm.account,
            bankSiteId: this.accountForm.bankSiteId, //新增银行网点地段
            bankId: this.accountForm.bankId,
            openCertificateFile: JSON.stringify(this.accountForm.upLoadFileAcc),
            agreementFile: JSON.stringify(this.accountForm.upLoadAgreementFile),
            labourCostFile: JSON.stringify(
              this.accountForm.upLoadArtificialFile
            ),
          }
          this.saveAccountAjax(url, data)
        } else {
          this.canLogin = false
          return false
        }
      })
    },
    //保存专户的ajax
    saveAccountAjax(url, data) {
      this.axios({
        method: 'post',
        url: url,
        data: data,
      })
        .then(
          (res) => {
            this.canLogin = false
            if (!res.data.hasError) {
              this.$message({
                message: '保存成功',
                type: 'success',
              })
              this.accountFormVisible = false //关闭弹窗
              this.$nextTick(function () {
                this.$refs.pagination.getTableListData()
              })
            } else {
              this.$message({
                message: res.data.errorMsg,
                type: 'error',
              })
            }
          },
          (res) => {
            this.canLogin = false
            this.$message({
              message: '保存失败',
              type: 'error',
            })
          }
        )
        .catch((error) => {
          this.canLogin = false
          this.$message({
            message: '保存失败',
            type: 'error',
          })
        })
    },
    //获取修改专户的信息
    getUpdateAccountInfo(projectId) {
      this.axios({
        method: 'post',
        url: 'api-acc/account/expand/accountdetail',
        data: {
          projectId: projectId,
        },
      })
        .then(
          (res) => {
            if (!res.data.hasError) {
              this.accountForm.projectId = projectId
              this.accountForm.bankId = parseInt(res.data.result.bankId) + ''
              this.getBankBranchList(this.accountForm.bankId)
              this.accountForm.accountId = res.data.result.id
              this.accountForm.account = res.data.result.account
              this.accountForm.bankSiteId = res.data.result.bankSiteId
                ? res.data.result.bankSiteId == 0
                  ? ''
                  : res.data.result.bankSiteId
                : ''
              if (res.data.result.openCertificateFiles.length > 0) {
                this.accountForm.upLoadFileAcc =
                  res.data.result.openCertificateFiles
                for (
                  var i = 0;
                  i < this.accountForm.upLoadFileAcc.length;
                  i++
                ) {
                  this.accountForm.srcList.push(
                    this.accountForm.upLoadFileAcc[i].url
                  )
                  this.accountForm.oldSrcList.push(
                    this.accountForm.upLoadFileAcc[i].url
                  )
                }
              }
              if (res.data.result.agreementFiles.length > 0) {
                this.accountForm.upLoadAgreementFile =
                  res.data.result.agreementFiles
                for (
                  var i = 0;
                  i < this.accountForm.upLoadAgreementFile.length;
                  i++
                ) {
                  this.accountForm.agrSrcList.push(
                    this.accountForm.upLoadAgreementFile[i].url
                  )
                  this.accountForm.oldAgrSrcList.push(
                    this.accountForm.upLoadAgreementFile[i].url
                  )
                }
              }
              if (res.data.result.labourCostFiles.length > 0) {
                this.accountForm.upLoadArtificialFile =
                  res.data.result.labourCostFiles
                for (
                  var i = 0;
                  i < this.accountForm.upLoadArtificialFile.length;
                  i++
                ) {
                  this.accountForm.artSrcList.push(
                    this.accountForm.upLoadArtificialFile[i].url
                  )
                  this.accountForm.oldArtSrcList.push(
                    this.accountForm.upLoadArtificialFile[i].url
                  )
                }
              }
            } else {
              this.$message({
                message: res.data.errorMsg,
                type: 'error',
              })
            }
          },
          (res) => {
            this.$message({
              message: '获取专户信息失败',
              type: 'error',
            })
          }
        )
        .catch((error) => {})
    },
    getFileList(val) {
      this.accountForm.oldSrcList.push(val)
      this.accountForm.srcList.push(val)
    },
    getFile(val) {
      this.accountForm.upLoadFileAcc = val
    },
    getFileListAgr(val) {
      this.accountForm.oldAgrSrcList.push(val)
      this.accountForm.agrSrcList.push(val)
    },
    getFileAgr(val) {
      this.accountForm.upLoadAgreementFile = val
    },
    // 添加专户项目名称分页
    ChangeSearch() {
      // 自动获取焦点
      this.$nextTick(() => {
        this.$refs.projectSearch.blur()
      })
      var item = this.projectOptions[this.accountForm.projectId]
      if (item) {
        this.projectId =
          this.projectOptions[this.accountForm.projectId].projectId
        this.getSeeExample()
        this.getSeeArtificial()
      }
    },
    visibleChangeProject(val) {
      if (!this.accountForm.projectId && this.accountForm.projectId !== 0) {
        if (val) {
          this.pageNo = 1
          this.projectSelect = ''
          this.accountForm.projectId = ''
          this.getProjectList(
            this.pageNo,
            this.pageSizeNumber,
            this.projectSelect
          )
        }
      } else {
        //手动输入再次打开弹框清空输入值
        // 获取的企业数据索引
        // 选中的企业的具体数据
        if (typeof this.accountForm.projectId === 'string') {
          this.accountForm.projectId = ''
        } else {
        }
      }
    },
    selectChange(val) {
      //手动输入掉接口会清空问题下拉框的值，掉完接口再赋值
      this.projectSelect = val
      this.getProjectList(1, this.pageSizeNumber, val)
      if (typeof this.accountForm.projectId === 'string') {
        this.accountForm.projectId = val
      }
      this.accountForm.projectId = val
    },
    handleSizeChange(val) {},
    handleCurrentChange(val) {
      this.accountForm.projectId = ''
      this.getProjectList(val, this.pageSizeNumber, this.projectSelect)
    },
    changeProject() {
      if (this.accountForm.projectId) {
        this.changeProject()
      }
    },
    getSeeExample() {
      var projectId
      if (this.$store.state.userType == 'MONITOR') {
        projectId = this.projectId ? this.projectId : this.firstProjectId
      } else {
        projectId = this.accountForm.projectId
          ? this.accountForm.projectId
          : this.firstProjectId
      }
      this.axios({
        method: 'post',
        url: '/api-f/template/download',
        data: {
          typeId: '02',
          projectId: projectId,
        },
      }).then((response) => {
        if (!response.data.hasError) {
          this.seeAgreement = response.data.result.templatePath
        }
      })
    },
    getName(url) {
      if (url) {
        const fileName = url.lastIndexOf('/') // 取到文件名开始到最后一个点的长度
        const fileNameLen = url.length // 取到文件名长度
        const fileType = url.substring(fileName + 1, fileNameLen) // 截
        return fileType
      }
    },
    checkImg(item) {
      var str = this.getName(item)
      if (str) {
        let arr = str.split('.')
        let name = arr[arr.length - 1]
        if (['png', 'PNG', 'jpg', 'JPG', 'jpeg', 'JPEG'].includes(name)) {
          return true
        }
        return false
      }
    },
    lookResult(url) {
      window.open(url)
    },
    showPic(type) {
      $('#' + type).click()
    },
    // 撤销销户
    revokeAccountCancellation(row) {
      this.$confirm('是否确认撤销销户？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.sureRevoke(row.id)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
          })
        })
    },
    sureRevoke(id) {
      this.axios({
        method: 'post',
        url: 'api-acc/account/expand/revertcancellation',
        data: {
          id: id,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.$message({
              message: '撤销销户成功',
              type: 'success',
            })
            this.$refs.pagination.getTableListData()
          } else {
            this.$message({
              message: response.data.errorMsg,
              type: 'error',
            })
          }
        })
        .catch((error) => {
          this.$message.error('撤销销户失败')
        })
    },
    // 人工费补充协议
    getFileListArtificial(val) {
      this.accountForm.oldArtSrcList.push(val)
      this.accountForm.artSrcList.push(val)
    },
    getFileArtificial(val) {
      this.accountForm.upLoadArtificialFile = val
    },
    getSeeArtificial() {
      var projectId = this.accountForm.projectId
        ? this.accountForm.projectId
        : this.firstProjectId
      this.axios({
        method: 'post',
        url: '/api-f/template/download',
        data: {
          typeId: '03',
          projectId: projectId,
        },
      }).then((response) => {
        if (!response.data.hasError) {
          this.seeArtificial = response.data.result.templatePath
        }
      })
    },
    getBankSite(bankId) {
      this.axios({
        method: 'post',
        url: 'api-acc/accountbank/expand/banksite',
        data: { bankId: bankId },
      })
        .then((response) => {
          this.bankSiteOptions = response.data.result
        })
        .catch((error) => {})
    },
    bankSelectChange(val) {
      if (val) {
        this.getBankSite(val)
      }
    },
    bankSiteClear() {
      this.bankSiteOptions = []
      this.filterField.bankSiteId = ''
    },
    getApi() {
      let loginType = localStorage.getItem('loginType')
      if (loginType === 'JC') {
        this.api = 'api-s/report/export_JC_CS_ACCOUNT'
      } else if (loginType === 'QY') {
        this.api = 'api-s/report/export_QY_ACCOUNT'
      } else if (loginType === 'XM') {
        this.api = 'api-s/report/export_XM_ACCOUNT'
      }
    },
    // 是否匹配银行推送的专户信息
    hasBankInfo(account) {
      this.axios({
        method: 'post',
        url: 'api-acc/account/expand/findBankAccountInfo',
        data: { account: account },
      })
        .then((res) => {
          if (!res.data.hasError) {
            this.isDisabled = false
          } else {
            this.isDisabled = true
            this.$message({
              message: res.data.errorMsg,
              type: 'warning',
            })
          }
        })
        .catch((error) => {})
    },
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll, true)
    let that = this
    this.$nextTick(function () {
      let tableHeightCur = this.$refs.tableBox1.$el.clientHeight
      let tableTop = this.$refs.tableBox.getBoundingClientRect().top
      if (tableHeightCur + tableTop > window.innerHeight) {
        this.tableHeight =
          this.$refs.mainCon.getBoundingClientRect().height - 86
      } else {
        document.getElementsByClassName('tableBoxCur').length &&
          (document.getElementsByClassName('tableBoxCur')[0].style.height =
            window.innerHeight - tableTop - 28 + 'px')
      }

      window.onresize = function () {
        if (!that.$refs.tableBox1) {
          return
        }
        let tableHeightCur = that.$refs.tableBox1.$el.clientHeight
        let tableTop = that.$refs.tableBox.getBoundingClientRect().top
        if (tableHeightCur + tableTop > window.innerHeight) {
          that.tableHeight =
            that.$refs.mainCon.getBoundingClientRect().height - 86
        } else {
          document.getElementsByClassName('tableBoxCur').length &&
            (document.getElementsByClassName('tableBoxCur')[0].style.height =
              window.innerHeight - tableTop - 40 + 'px')
        }
      }
    })
  },
}
</script>

<style scoped lang="less">
.download {
  position: absolute;
  right: 10px;
  top: 8px;
}
.mainCon {
  top: 198px;
}

// 修改专户弹窗样式
.uploadBox {
  position: relative;
  .uploadImg {
    width: 96px;
    height: 40px;
    color: #009588;
    border: 1px solid #009588;
    cursor: pointer;
  }
  .upLoadDom {
    position: absolute;
    width: 96px;
    height: 40px;
    top: 0;
    left: 0;
    opacity: 0;
    line-height: 0px;
    form {
      input {
        width: 96px;
        height: 40px;
        line-height: 0px;
        cursor: pointer;
      }
    }
  }
}

.agreementBox {
  /deep/label {
    line-height: 20px;
  }
}
.imgStyle {
  margin-left: 135px;
  li {
    position: relative;
    margin-right: 20px;
    margin-bottom: 20px;
    .iconjian {
      position: absolute;
      right: -6px;
      top: -10px;
      font-size: 20px;
      cursor: pointer;
    }
    .el-image {
      cursor: pointer;
    }
  }
}
.inputWidth {
  width: 310px !important;
}
.warningInfo {
  background: #fffbe6;
  height: 36px;
  padding-left: 58px;
  position: relative;
  .warningIcon {
    color: orange;
    font-size: 20px;
    position: absolute;
    top: 8px;
    left: 30px;
  }
  .warningText {
    font-family: 'SourceHanSansCN-Regular';
    font-size: 14px;
    color: #ff4d4a;
    line-height: 36px;
  }
}
// /deep/ .el-dialog__body {
//   padding: 0;
// }
.addAccount {
  padding-top: 24px;
}
// .el-dialog__footer {
//   height: 66px;
//   padding: 15px 20px;
// }
// .el-dialog__footer button {
//   height: 36px !important;
// }
.previewImg {
  position: absolute;
  top: 0;
  left: 0;
  right: 30px;
  cursor: pointer;
  /deep/.el-image__preview {
    opacity: 0;
  }
}
.signBox {
  // padding:20px 24px;
  .statusTitle {
    height: 36px;
    line-height: 20px;
    position: relative;
    padding-bottom: 16px;
    padding-left: 15px;
    color: #e02020;
    font-size: 16px;
    &::before {
      content: '';
      position: absolute;
      width: 4px;
      height: 20px;
      left: 0;
      top: 0;
      background-color: #e02020;
    }
  }
  .editTip {
    line-height: 16px;
    span {
      color: orange;
    }
  }
  .tableTips {
    margin-bottom: 10px;
  }
  .saveMr {
    margin: 15px 0;
  }
}
.successBox {
  text-align: center;
  img {
    margin: 20px auto 20px;
  }
  p {
    margin-bottom: 30px;
    font-size: 16px;
  }
}
@import '../../../static/css/filterArea.less';
</style>
